<template>
  <div class="left-bottom">
    <block-title v-if="dataSet.leftBottom" :words="dataSet.leftBottom.title"
      ref="blockTitle"></block-title>
    <div class="data-content"
      ref="leftBottom">
      <ul class="cube-list">
        <li class="cube-item"
          :class="[`cube-item${index}`]"
          v-for="(cube, index) in accessData"
          :key="index">
          <cube :cubeData='cube'
            :hoz='["前置机数","更新及时率"].includes(cube.name)?true:false'
            :ref="`cube${index}`"></cube>
        </li>
      </ul>
    </div>
    <svg version="1.1"
      ref="bd"
      class="box-bd-bg"
      x="0px"
      y="0px"
      viewBox="0 0 420.8 13.4"
      style="enable-background:new 0 0 420.8 13.4;"
      xml:space="preserve">
      <path class="st0"
        d="M334.3,8.4h81v5h-86L334.3,8.4z" />
      <path class="st1"
        d="M0.3,0.4l13.5,11h311.5l5-6h90v5" />
    </svg>
  </div>
</template>
<script>
import BlockTitle from '@/components/common/blockTitle.vue'
import Cube from '@/components/common/cube.vue'
import { mapState } from 'vuex'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'LeftBottomChild',
  components: {
    BlockTitle,
    Cube
  },
  model: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState(['dataSet']),
    accessData() {
      if (this.dataSet.leftBottom) {
        return this.dataSet.leftBottom.accessData
      } else {
        return []
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({}),
        leftBottom = TweenMax.from(this.$refs.leftBottom, 0.5, {
          opacity: 0,
          height: 0
        }),
        bd = TweenMax.from(this.$refs.bd, 0.3, { opacity: 0 })
      tl.addLabel('start', 0)
        .add(leftBottom, 0)
        .add(this.$refs.blockTitle.init(), 'start-=0.2')

      for (let i = 0; i < this.accessData.length; i++) {
        tl.add(this.$refs[`cube${i}`][0].init(), '-=0.5')
      }
      tl.add(bd, '-=2.2')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.left-bottom {
  position: relative;

  width: 100%;
  height: 100%;

  .data-content {
    height: calc(100% - 36px);
    padding: 30px 30px 0 26px;

    background: linear-gradient(0deg, #035ef01a, transparent);
  }
  .cube-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 24px repeat(3, 44px);
    // grid-auto-flow: column;
    grid-row-gap: 12px;
  }
  .cube-item0,
  .cube-item1 {
    grid-column-start: span 2;
  }
}
.st0 {
  fill: #00f7fa;
}
.st1 {
  fill: none;
  stroke: #00f7fa;
}
.box-bd-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>